<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div style="font-size: 25px;color: aliceblue;">蜗牛在线实验室</div>
                <div style="margin:0 15px; color: antiquewhite;">欢迎你：{{ }}</div>
                <img class="icon_head" alt="">
                <el-dropdown class="btn">
                    <span class="el-dropdown-link">
                        设置
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="gotoCenter">个人中心</el-dropdown-item>
                            <el-dropdown-item @click="updatePassword">密码修改</el-dropdown-item>
                            <el-dropdown-item @click="open">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu router :default-active=route.path class="el-menu-vertical-demo" background-color=''
                        @open="handleOpen" @close="handleClose">
                        <!-- 一级菜单  遍历不存在children的-->
                        <template v-for="item in menus" >
                            <el-menu-item v-if="!item.children" :key="item.title" :index='item.path'>
                                <el-icon><icon-menu /></el-icon>
                                <span>{{ item.title }}</span>
                            </el-menu-item>
                            <!-- 遍历存在children的item -->
                            <el-sub-menu v-else   :index='item.path'>
                                <template #title>
                                    <el-icon>
                                        <location />
                                    </el-icon>
                                    <span>{{ item.title }}</span>
                                </template>
                                <!-- 二级路由 -->
                                <el-menu-item-group v-for="ele in item.children" :key="ele.title">
                                    <el-menu-item :index="ele.path">{{ ele.title }}</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 面包屑 -->
                    <div class="breadcrumb" style="margin-bottom: 20px;margin-top: 20px;" >
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-if="!rangeList.includes(route.path)">组织管理</el-breadcrumb-item>
                            <el-breadcrumb-item v-else  >靶场管理</el-breadcrumb-item>
                            <template v-for="item in route.matched" >
                                <el-breadcrumb-item v-if="item.meta.name" :key="item.path" :to="{ path: item.path }" >
                                    <span :class="item.path==route.path?'active1':''">
                                        {{item.meta.name}}
                                    </span>
                                    
                                </el-breadcrumb-item>
                            </template>
                            
                            
                        </el-breadcrumb>
                    </div>
                    
                        <RouterView>
                    
                </RouterView>
                  

                    
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { eventsBus } from '../utils/eventBus';
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { router } from '../router';
import { useRoute, useRouter } from 'vue-router';
import { ArrowDown } from '@element-plus/icons-vue'


//侧边栏数据
import { menus } from '../configs/sideMenus';
import { update } from 'lodash';
// 侧边栏权限
// import { filterMenusOrRoutes } from '../utils/filterMenu';
// const filterMenus = filterMenusOrRoutes(menus,userInfo.value.role)

//ref 也可定义引用数据类型

// const userInfo = ref(JSON.parse(localStorage.userInfo))
const rangeList= ref(['/home/rangeList','/home/rangeList/newList','/home/wang'])



//路由地址栏
const route = useRoute()
//路由跳转
const router = useRouter()
console.log(route);

onMounted(() => {
    eventsBus.addListener('iconUpdata', (params: string) => {
        console.log(params);
        // userInfo.value = params
    })
})
const open = () => {
    ElMessageBox.confirm(
        '你确定退出吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        //确定
        .then(()=>{
            //清除本地存储
            localStorage.clear()
            router.replace('/login')
            //   ElMessage({
            //     type: 'success',
            //     message: '已退出',
            //   })
        })
        .catch(()=>{

        })
}

const handleOpen = (key: string, keyPath: string[]) => {
   
}
const handleClose = (key: string, keyPath: string[]) => {
    
}

function gotoCenter() {
    router.replace("/home/center")
}
function updatePassword() {
    router.replace("/home/updataPassword")
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100vh;
}

.el-header {
    background-color: rgb(22, 29, 44);
    display: flex;
    align-items: center;

    .icon_head {
        width: 50px;
        height: 50px;
        border-radius: 25px;
    }

    .btn {
        width: 50px;
        height: 30px;
        font-size: 12px;
        color: white;
        border-radius: 10px;
        position: relative;
        left: 70%;
    }
}

.el-aside {

    height: 100vh;
}

.el-main {
    background-color: rgb(230, 236, 218);
    padding:0 0 0 20px ;
}

.el-menu-vertical-demo {
    height: 100vh;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
:deep(.el-breadcrumb__inner){
    font-weight: normal !important;
}
.active1{
        font-weight: bold;
}

</style>
